<template>
  <div class="moment-profile-view common-mobile-view">
    <profile-card />

    <el-tabs v-model="activeName"
             stretch class="profile-tabs"
             @tab-click="handleClick">
      <el-tab-pane label="朋友圈" name="moment">
        <moment-list />
      </el-tab-pane>
      <el-tab-pane label="菜谱记录" name="recipe">
        <recipe-list />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import RecipeList from '@/components/Food/RecipeList.vue'
import ProfileCard from '@/components/Profile/ProfileCard.vue'
import { useFoodStore } from '@/store/food.ts'
import { onMounted, ref } from 'vue'
import MomentList from '@/components/Moment/MomentList.vue'
import type { TabsPaneContext } from 'element-plus'

const foodStore = useFoodStore()

const activeName = ref('moment')

onMounted(async () => {
  await foodStore.queryMoment(foodStore.currentMomentUserId)
})

const handleClick = async (tab: TabsPaneContext) => {
  switch (tab.paneName) {
    case 'moment':
      await foodStore.queryMoment(foodStore.currentMomentUserId)
      break
    case 'recipe':
      await foodStore.queryRecipeByUser(foodStore.currentMomentUserId)
      break
    default:
      break
  }
}
</script>

<style lang="scss">
.moment-profile-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>
